<template>
    <div>
        <el-card>
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>系统管理</el-breadcrumb-item>
                <el-breadcrumb-item>公告</el-breadcrumb-item>
            </el-breadcrumb>
            <div class="btnBox">
                <div>
                    <el-button size="small" @click="addHandle">添加</el-button>
                </div>
            </div>
            <el-table :data="tableData" border style="width: 100%" height="626">
                <el-table-column prop="title" label="公告标题"></el-table-column>
                <el-table-column prop="content" label="公告内容"></el-table-column>
                <!-- <el-table-column prop="createdTime" label="创建时间"></el-table-column> -->
                <el-table-column prop="publishTime" label="发布时间"></el-table-column>
                <el-table-column label="状态" width="120">
                    <template slot-scope="scope">
                        <el-tag size="small" v-if="scope.row.isSend">已发布</el-tag>
                        <el-tag size="small" type="warning" v-else>未发布</el-tag>
                    </template>
                </el-table-column>

                <el-table-column label="操作" width="300">
                    <template slot-scope="scope">
                        <div style="display: flex; justify-content: space-between; gap: 5px;">
                            <el-button size="small" icon="el-icon-edit" @click="handle('del', scope.row)">删除</el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <div class="paginationBox">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="pageNum" :page-sizes="[50, 100, 150]" :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper" :total="totalNum"></el-pagination>
            </div>
        </el-card>

        <!-- 添加弹窗 -->
        <el-dialog title="公告" :visible.sync="addialogVisible" width="32%" :before-close="closeAddDialog">
            <el-form :model="form" :inline="true" :rules="rules" ref="form" label-width="120px">
                <el-form-item label="公告标题" prop="title">
                    <el-input v-model="form.title" placeholder="请输入公告标题" style="width: 400px"></el-input>
                </el-form-item>
                <el-form-item label="公告内容" prop="content">
                    <el-input type="textarea" :autosize="{ minRows: 4, maxRows: 8 }" v-model="form.content"
                        placeholder="请输入公告内容" style="width: 400px"></el-input>
                </el-form-item>
                <el-form-item label="发布时间" prop="publishTime">
                    <el-date-picker v-model="form.publishTime" type="date" placeholder="选择日期" value-format="yyyy-MM-dd"
                        size="small" style="margin-right: 16px;">
                    </el-date-picker>
                    <el-button size="small" @click="nowHandle">立即发布</el-button>
                </el-form-item>

            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="closeAddDialog">取 消</el-button>
                <el-button type="primary" @click="submitAddDialog">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>

import { getNoticeList, addNoticeList, delNoticeList } from "network/user";


export default {
    data() {
        return {
            tableData: [],

            addialogVisible: false,//弹窗
            form: {
                title: '',
                content: '',
                type: 1,
                publishTime: '', // 发布时间
            },
            rules: {
                title: [
                    { required: true, message: '请输入公告标题', trigger: 'blur' },
                ],
                content: [
                    { required: true, message: '请输入公告内容', trigger: 'blur' },
                ],

                publishTime: [
                    { required: true, message: '请选择发布时间', trigger: 'change' },
                ],
            },

            editFlag: false,
            pageSize: 50,
            pageNum: 1,
            totalNum: 0,


        };
    },
    methods: {

        // 获取当前时间
        nowHandle() {
            this.form.publishTime = this.getNowDate()
            console.log(this.getNowDate());
        },

        addHandle() {
            this.addialogVisible = true
        },

        getList() {
            getNoticeList().then(res => {
                if (res.flag) {
                    console.log(res);
                    res.data.forEach(item => {
                        item.isSend = new Date(item.publishTime).getTime() < new Date().getTime()
                    })
                    this.tableData = res.data
                }
            })
        },


        handle(flag, obj) {
            if (flag == 'del') {
                this.$confirm('是否删除该公告, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    delNoticeList({
                        afficheId: obj.afficheId
                    }).then(res => {
                        if (res.flag) {
                            this.$message.success('删除成功')
                            this.getList()
                        } else {
                            this.$message.warning('删除失败')
                        }
                    })
                }).catch(() => { });
            }


        },



        submitAddDialog() {
            this.$refs.form.validate((valid) => {
                if (!valid) return
                var form = this.form;


                console.log(form);

                addNoticeList(form).then(res => {
                    if (res.flag) {
                        this.$message.success('添加成功')
                        this.getList()
                        this.closeAddDialog()
                    } else {
                        this.$message.warning('添加失败')
                    }
                })
            });

        },
        // 关闭弹窗
        closeAddDialog() {
            this.addialogVisible = false
            this.$refs.form.resetFields();
        },
        handleSizeChange(val) {
            this.pageSize = val;
            this.getList()
        },
        handleCurrentChange(val) {
            this.pageNum = val;
            this.getList()
        },

        // 获取当前时间
        getNowDate() {
            var myDate = new Date;
            var year = myDate.getFullYear();
            var mon = myDate.getMonth() + 1;
            mon = mon < 10 ? '0' + mon : mon
            var date = myDate.getDate();
            date = date < 10 ? '0' + date : date
            var date1 = myDate.getDate() + 1;
            date1 = date1 < 10 ? '0' + date1 : date1
            var hours = myDate.getHours();
            hours = hours < 10 ? '0' + hours : hours
            var minutes = myDate.getMinutes();
            minutes = minutes < 10 ? '0' + minutes : minutes
            var seconds = myDate.getSeconds();
            seconds = seconds < 10 ? '0' + seconds : seconds
            return year + "-" + mon + "-" + date
        },



    },
    created() {

        this.getList()

    },

};
</script>

<style scoped>
.paginationBox {
    display: flex;
    align-content: center;
    justify-content: end;
    width: 100%;

}
</style>